<template>
  <Separator
    class="tr-separator"
    v-show="mappingProps.visible"
    v-bind="{ ...attrs, ...mappingProps }"
    :color="mappingProps.color"
    :style="lineStyle"
    tabIndex="-1"
  >
  </Separator>
</template>

<!-- ts只是方便开发提示和补全代码，没有用语法 -->

<script setup type="typescript">
import Separator from '@teld/q-components/Separator';
import useMappingProps from 't/common/hooks/useMappingProps';
import {
	commonProps
} from 't/common/utils';
import { useAttrs, useSlots, computed } from 'vue';

// 直接映射透传qursor的属性
const attrs = useAttrs();
// 父级组件传递来的slots
const slots = useSlots();
// 组件传参
const props = defineProps(
	{
		...commonProps,
		...Separator.props,
		color: {
			type: String,
			default: 'rgba(120,120,120,0.2)'
		},

		// 长度
		len: {
			type: String,
			default: ''
		},

		tabIndex: '-1'
	},
);

// 大写首字母属性
const [mappingProps, mappingExpose] = useMappingProps(props);
defineExpose(mappingExpose);

const lineStyle = computed(() => {
	const { vertical, len } = mappingProps;
	if (len == '') return {};
	if (vertical) {
		return { height: len }
	} else {
		return { width: len };
	}
})
</script>

<style lang="scss"></style>
